<html lang="zh-CN">

<head>
    
    <meta charset="utf-8">
    <title id='title'>一级目录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1.0, user-scalable=no">
    <!-- Site CSS -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="http://static.bootcss.com/www/assets/css/site.min.css?v5" rel="stylesheet">
    <style>
    .pagination>li>a, .pagination>li>span {
    
    padding: 6px 9px;
    
}
    </style>
    </head>
    <body>
    <div class="panel panel-default">
    <div class="panel-heading" style="padding-top: 30px" align="center">
        2048
    </div>
    <table class="table">

<?php
for($i = 0; $i < 4 ; $i++)
{
	echo "<tr>";
	for($k = 0; $k < 4 ; $k++)
	{
		echo '<td align="center" class="label-num" id="'.$i.$k.'">'.$matrix[$i][$k].'</td>';
	}
	echo "</tr>";
}
//var_dump($start);

?>
</table>
</div>

<table class="table" border="0">
<tr align="center"><td align="center" colspan="3"><button onclick='getDirection(this.id)' id='up'>UP</button></td></tr>
<tr align="center"><td align="center"><button onclick='getDirection(this.id)' id='left'>LEFT</button></td>
<td align="center"><button onclick='getDirection(this.id)' id='down'>DOWN</button></td>
<td align="center"><button onclick='getDirection(this.id)' id='right'>RIGHT</button></td>
</tr>
</table>




<script>
function getDirection(id)
{
    var direction = [0,0];
	switch(id)
	{
		case "up"   : direction = [0,1];;break;
		case "down" : direction = [0,-1];break;
		case "left" : direction = [-1,0];break;
		case "right": direction = [1,0];break;
		default: break;
	}
	var num = move(direction);
	if(num != 0)
	{
		addRandom();
	}
	var count = 0;
	for(var i =0 ;i < 4 ;i++)
	{
		for(var j = 0 ;j<4 ;j++)
		{
			if(document.getElementById(i+""+j).innerHTML == 0)
			{
				count++;
			}
		}
	}
	if(count == 0)
	{
		alert("你已经完蛋了");
		location.href="http://liveser.cn/test";
	}
}

function addRandom()
{
	
	var empty = [];
	for(var i =0 ;i < 4 ;i++)
	{
		for(var j = 0 ;j<4 ;j++)
		{
			if(document.getElementById(i+""+j).innerHTML == 0)
			{
				empty.push([i,j]);
			}
		}
	}
	pos = parseInt(Math.random()*(empty.length));
	document.getElementById(empty[pos][0]+""+empty[pos][1]).innerHTML = 2;
	//alert(empty[pos]);
}

function move(value)
{
//	alert(value);return;
    var num = 0;
	if(value[0] == 0)
	{
		if(value[1] == 1)
		{
			num=move_up();
		}
		else if(value[1] == -1)
		{
			num=move_down();
		}
	}
	else if(value[1] ==0)
	{
		if(value[0] == 1)
		{
			num=move_right();
		}
		else if(value[0] == -1)
		{
			num=move_left();
		}
	}
	return num;
}
function move_up()
{
	//向上规整
	var count = 0;
	for(var i =0;i < 3;i++)
	{
		for(var j = 0;j < 4;j++)
		{
			if(document.getElementById(i+""+j).innerHTML != 0)
			{
				count++ ;
				for(var q =i+1;q<4;q++)
				{
					if(document.getElementById(i+""+j).innerHTML == document.getElementById(q+""+j).innerHTML && document.getElementById(i+""+j).innerHTML != 0)
					{
						//alert(j);
						document.getElementById(i+""+j).innerHTML = document.getElementById(i+""+j).innerHTML*2;
						
						document.getElementById(q+""+j).innerHTML = 0;
					}
				}
			}
			
		}
	}
	//向上找相同
	for(var i = 3 ;i>0;i--)
	{
		for(var c =0;c< 4;c++)
		{
			if(document.getElementById((i-1)+""+c).innerHTML == 0)
			{
				document.getElementById((i-1)+""+c).innerHTML = document.getElementById((i)+""+c).innerHTML;
				document.getElementById((i)+""+c).innerHTML = 0;
			}
			
		}
	}
	return count;
}

function move_down()
{
	var count = 0;
	//向下规整
	for(var i =3;i >= 0;i--)
	{
		for(var j = 0;j < 4;j++)
		{
			if(document.getElementById(i+""+j).innerHTML != 0)
			{
				count++;
				for(var q =i-1;q>=0;q--)
				{
					if(document.getElementById(i+""+j).innerHTML == document.getElementById(q+""+j).innerHTML )
					{
						//alert(j);
						document.getElementById(i+""+j).innerHTML = document.getElementById(i+""+j).innerHTML*2;
						document.getElementById(q+""+j).innerHTML = 0;
					}
				}
			}
			
		}
	}
	//向下找相同
	for(var i = 0 ;i<3;i++)
	{
		for(var c =0;c< 4;c++)
		{
			if(document.getElementById((i+1)+""+c).innerHTML == 0)
			{
				document.getElementById((i+1)+""+c).innerHTML = document.getElementById((i)+""+c).innerHTML;
				document.getElementById((i)+""+c).innerHTML = 0;
			}
			
		}
	}
	return count;
}

function move_left()
{
	var count = 0;
	//向左规整
	for(var i =0;i < 3;i++)
	{
		for(var j = 0;j < 4;j++)
		{
			if(document.getElementById(j+""+i).innerHTML != 0)
			{
				count++;
				for(var q =i+1;q<4;q++)
				{
					if(document.getElementById(j+""+i).innerHTML == document.getElementById(j+""+q).innerHTML && document.getElementById(j+""+i).innerHTML != 0)
					{
						//alert(j);
						document.getElementById(j+""+i).innerHTML = document.getElementById(j+""+i).innerHTML*2;
						
						document.getElementById(j+""+q).innerHTML = 0;
					}
				}
			}
			
		}
	}
	//向左找相同
	for(var i = 3 ;i>0;i--)
	{
		for(var c =0;c< 4;c++)
		{
			if(document.getElementById(c+""+(i-1)).innerHTML == 0)
			{
				document.getElementById(c+""+(i-1)).innerHTML = document.getElementById(c+""+i).innerHTML;
				document.getElementById(c+""+i).innerHTML = 0;
			}
			
		}
	}
	return count;
}

function move_right()
{
	var count = 0;
	//向右规整
	for(var i =3;i >= 0;i--)
	{
		for(var j = 0;j < 4;j++)
		{
			if(document.getElementById(j+""+i).innerHTML != 0)
			{
				count++;
				for(var q =i-1;q>=0;q--)
				{
					if(document.getElementById(j+""+i).innerHTML == document.getElementById(j+""+q).innerHTML )
					{
						//alert(j);
						document.getElementById(j+""+i).innerHTML = document.getElementById(j+""+i).innerHTML*2;
						document.getElementById(j+""+q).innerHTML = 0;
					}
				}
			}
			
		}
	}
	//向右找相同
	for(var i = 0 ;i<3;i++)
	{
		for(var c =0;c< 4;c++)
		{
			if(document.getElementById(c+""+(i+1)).innerHTML == 0)
			{
				document.getElementById(c+""+(i+1)).innerHTML = document.getElementById(c+""+i).innerHTML;
				document.getElementById(c+""+i).innerHTML = 0;
			}
			
		}
	}
	return count;
}
</script>
</body>
</html>